<template>
    <div class="update-pwd">
			<div class="update-heade">
				<h4>修改密码</h4>
				<a href="#" @click="btnCancle"><img src="../../assets/img/delete.png" alt="#" class="del-img"/></a>
			</div>
			<div class="line-xiugai"></div>
			<div class="update-middle">
				<div>
					<h4>原密码</h4>
					<input type="password" placeholder="输入原密码" v-model="pwd"/>
				</div>
				<div class='updateUpwd'>
					<h4>新密码</h4>
					<input type="password" placeholder="输入新密码" v-model="newPwd"/><br />
					<input type="password" placeholder="重复新密码" v-model="secondPwd"/>
					<p class="pwdReg">{{pwdReg}}</p>
				</div>
				<div>
					<h4>验证码</h4>
					<input type="text" placeholder="图片验证码"/>
					<div style="display: inline-block;">验证码</div>
				</div>
			</div>
			<div class="update-btn">
				<button @click='sendPwd'>确定</button>
				<button @click="btnCancle">取消</button>
			</div>
		</div>
</template>
<script>
	const Mock = require('mockjs')
	Mock.mock('upwd',()=>{
		return{pwd:'456789',code:1,msg:'密码修改成功'}
	})
	
	export default{
		data(){
			return{
				pwd:'',
				newPwd:'',
				secondPwd:'',
				pwdReg:'密码长度8~16位，数字、字母、字符至少包含两种'
			}
		},
		methods:{
			sendPwd(){
				this.axios.get('upwd',{pwd:this.mewPwd}).then((res)=>{
					if(this.pwd==res.data.pwd){
						if(this.newPwd == this.secondPwd){
							alert('密码修改成功');
						}else{
							this.pwdReg = '两次密码不一致';
							this.$('.pwdReg').css("color","red");
						}
					}else{
						alert('密码与原密码不一致');
					}
				}).catch((err)=>{
					throw err;
				})
			},
			btnCancle(){
				this.$router.push('/personal');
			}
		}
	}

</script>
	
<style>
    body{
	background: #E0E0E0;
}
body>div{
	display: block;
}
.update-pwd{
	display: block;
	width: 442px;
	height: 540px;
	margin: 0 auto;
	background: #FFFFFF;
	margin-top: 150px;
}
.update-middle>div{
	margin-left: 54px;
}
.update-heade{
	padding: 26px 10px 16px 16px;
	position: relative;
}
.line-xiugai{
	width: 413px;
	border-bottom: 1px solid #E0E0E0;
	margin: 0 auto;
}
.update-middle{
	padding-top: 40px;
	padding-bottom: 40px;
}
.update-middle>div:nth-child(1){
	padding-bottom:20px ;
}
.update-pwd input{
	width: 330px;
	height: 40px;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 20px;
	outline: none;
}
.update-middle>div:nth-child(3){
	padding-top: 10px;
}
.update-middle>div:nth-child(3)>input{
	width: 135px;
}
.update-btn{
	text-align: center;
}
.update-btn button{
	width: 122px;
	height: 35px;
	outline: none;
	border: 1px solid #E8E8E8;
}
.update-btn>button:nth-child(1){
	background: #FF6700;
}
.update-btn>button:nth-child(2){
	background: #FFFFFF;
}
.del-img{
	width:20px;
	height: 20px;
	position: absolute;
	right: 15px;
	top:20px;
}

</style>
